---
import Layout from '../../layouts/Layout.astro';
import ProductCard from '../../components/ProductCard.astro';
import { getProductsFromDB, getBrandBySlugFromDB } from '../../lib/products';
import { getBrandContent } from '../../data/brand-content';
import { getBrandLogo } from '../../components/BrandLogos';

const { slug } = Astro.params;
const dbBrand = await getBrandBySlugFromDB(slug!);
const brandName = dbBrand?.name || slug!.charAt(0).toUpperCase() + slug!.slice(1);
const logoSrc = dbBrand?.logo_url || null;
const inlineBrandSvg = getBrandLogo(slug!);
const brandSneakers = await getProductsFromDB({ limit: 24, brand: slug! });
const content = getBrandContent(slug!);

const lowestPrice = brandSneakers.length > 0 ? Math.min(...brandSneakers.map(p => p.lowestPrice)) : 0;
const title = content?.metaTitle || `${brandName} sneakers vergelijken — ${brandSneakers.length} modellen vanaf €${lowestPrice.toFixed(2).replace('.', ',')} | SneakerPicks`;
const description = content?.metaDescription || `${brandName} sneaker prijzen vergelijken bij Nederlandse webshops. Vanaf €${lowestPrice.toFixed(2).replace('.', ',')}. Vind de laagste prijs.`;
---

<Layout title={title} description={description}>
  <!-- Hero -->
  <section class="relative overflow-hidden">
    <div class="absolute inset-0 bg-gradient-to-b from-accent/5 via-transparent to-transparent"></div>
    <div class="relative mx-auto max-w-7xl px-4 py-16 sm:px-6">
      <div class="flex items-center gap-6">
        {inlineBrandSvg ? (
          <div class="brand-logo h-12 w-auto max-w-[120px] text-text" set:html={inlineBrandSvg} />
        ) : logoSrc ? (
          <img src={logoSrc} alt={brandName} class="brand-logo h-12 w-auto max-w-[120px] object-contain" onerror="this.style.display='none'" />
        ) : (
          <span class="text-5xl font-black text-accent">{brandName.charAt(0)}</span>
        )}
        <div>
          <h1 class="text-4xl font-black tracking-tight sm:text-5xl">{brandName} Sneakers</h1>
          <p class="mt-1 text-text-secondary">{brandSneakers.length} sneakers beschikbaar · Prijzen vergelijken</p>
        </div>
      </div>

      {content && (
        <p class="mt-4 text-lg italic text-accent">{content.tagline}</p>
      )}
    </div>
  </section>

  <!-- Products -->
  <section class="mx-auto max-w-7xl px-4 py-8 sm:px-6">
    <h2 class="mb-6 text-sm font-bold uppercase tracking-widest text-text-muted">Alle {brandName} sneakers</h2>
    <div class="grid grid-cols-2 gap-4 sm:gap-6 md:grid-cols-3 lg:grid-cols-4">
      {brandSneakers.map((sneaker, i) => (
        <ProductCard sneaker={sneaker} index={i} />
      ))}
    </div>

    {brandSneakers.length === 0 && (
      <div class="py-20 text-center">
        <p class="text-lg text-text-muted">Nog geen sneakers gevonden voor {brandName}.</p>
      </div>
    )}
  </section>

  <!-- SEO Content -->
  {content && (
    <section class="mx-auto max-w-7xl px-4 py-16 sm:px-6">
      <div class="mx-auto max-w-3xl">
        <h2 class="mb-6 text-2xl font-black tracking-tight">Over {brandName}</h2>

        <div class="space-y-4 text-text-secondary leading-relaxed">
          {content.description.split('\n\n').map(paragraph => (
            <p>{paragraph}</p>
          ))}
        </div>

        <div class="mt-8 grid grid-cols-2 gap-4 sm:grid-cols-3">
          <div class="rounded-2xl border border-border/50 bg-bg-card p-4">
            <p class="text-xs font-bold uppercase tracking-widest text-text-muted">Opgericht</p>
            <p class="mt-1 text-lg font-black text-text">{content.founded}</p>
          </div>
          <div class="rounded-2xl border border-border/50 bg-bg-card p-4">
            <p class="text-xs font-bold uppercase tracking-widest text-text-muted">Oorsprong</p>
            <p class="mt-1 text-lg font-black text-text">{content.origin}</p>
          </div>
          <div class="col-span-2 rounded-2xl border border-border/50 bg-bg-card p-4 sm:col-span-1">
            <p class="text-xs font-bold uppercase tracking-widest text-text-muted">Sneakers</p>
            <p class="mt-1 text-lg font-black text-text">{brandSneakers.length} modellen</p>
          </div>
        </div>

        <div class="mt-8">
          <h3 class="mb-4 text-sm font-bold uppercase tracking-widest text-text-muted">Populaire {brandName} modellen</h3>
          <div class="flex flex-wrap gap-2">
            {content.popularModels.map(model => (
              <span class="rounded-full border border-border/50 bg-bg-card px-4 py-2 text-sm font-semibold text-text-secondary">
                {model}
              </span>
            ))}
          </div>
        </div>
      </div>
    </section>
  )}
</Layout>

<style>
  .brand-logo {
    filter: brightness(0);
    transition: filter 0.3s ease;
  }
  :global(.dark) .brand-logo {
    filter: brightness(0) invert(1);
  }
</style>